<template>
    <div class="main">
        <!-- 头部 -->
        <div class="vip-header">
            <p class="title">会员专区</p>
            <div class="content">
                <div class="avatar"><img src="../../../../../public/image/authenticate_personal@3x.png" alt="" /></div>
                <div class="mid">
                    <div class="left">
                        <div class="name">
                            1379680_JUB3
                            <div class="box">
                                <i class="lv">LV.</i>
                                <i class="lv1">1</i>
                            </div>
                        </div>
                        <div class="tip">开通会员尊享10大特权</div>
                    </div>
                    <div class="middle">
                        <img src="../../../../../public\image\teach_video_free.png" />
                        <p class="text">
                            以下<i> {{ videoList?.totalElements }} </i>个会员专区课程 全部免费学习
                        </p>
                    </div>
                    <div class="right">
                        <img src="../../../../../public\image\member_preferential.png" />
                        <p class="text">购买非会员专区课程 可获会员立减优惠</p>
                    </div>
                </div>
                <div class="open">
                    <el-button type="primary" size="default" @click="">立即开通</el-button>
                    <span>查看/开通 ></span>
                </div>
            </div>
        </div>
        <!-- 过滤器 -->
        <Filter :list="sortList!"></Filter>
        <!-- 排序 -->
        <div class="order">
            <div class="item" @click="changeIsStyle(1)" :class="{ active: isStyle == 1 }">综合排序</div>
            <div class="item" @click="changeIsStyle(2)" :class="{ active: isStyle == 2 }">销量</div>
            <div class="item" @click="changeIsStyle(3)" :class="{ active: isStyle == 3 }">浏览量</div>
            <div class="item" @click="changeIsStyle(4)" :class="{ active: isStyle == 4 }">价格</div>
            <div class="item" @click="changeIsStyle(5)" :class="{ active: isStyle == 5 }">发布时间</div>
        </div>
        <!-- 视频 -->
        <VideoList :list="videoList!"></VideoList>
    </div>
</template>

<script setup lang="ts">
import Filter from "../Filter/index.vue";
import VideoList from "../videoList/index.vue";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import vipApi from "@/api/course";
const isStyle = ref<any>(1);
const changeIsStyle = (index: any) => {
    isStyle.value = index;
    console.log(isStyle.value);

    if (index == 1) {
        postVideoList();
    }
    if (index == 2) {
        vipSalesList();
    }
    if (index == 3) {
        ViewList();
    }
    if (index == 4) {
        priceHighList();
    }
    if (index == 5) {
        addTimeList();
    }
};

//sort列表的数据
const sortList = ref<any>();
const getSortList = async () => {
    try {
        let result = await vipApi.reqSortList();
        sortList.value = result;
        console.log(sortList.value);
    } catch (error) {
        ElMessage.error("列表的数据");
        return Promise.reject(error);
    }
};
// 综合排序视频数据
const videoList = ref<any>();
const postVideoList = async () => {
    try {
        let result = await vipApi.postVideo();
        videoList.value = result;
        console.log("综合排序视频数据", videoList.value);
    } catch (error) {
        console.log("综合排序视频数据");
    }
};
// 销量视频数据

const vipSalesList = async () => {
    try {
        let result = await vipApi.vipSales();
        videoList.value = result;
        console.log("销量视频数据", videoList.value);
    } catch (error) {
        console.log("销量视频数据");
    }
};
// 浏览量视频数据

const ViewList = async () => {
    try {
        let result = await vipApi.postViewList();
        videoList.value = result;
    } catch (error) {
        console.log("浏览量视频数据");
    }
};
// 价格由高到低

const priceHighList = async () => {
    try {
        let result = await vipApi.priceHighList();
        videoList.value = result;
    } catch (error) {
        console.log("价格由高到低");
    }
};
// 发布时间

const addTimeList = async () => {
    try {
        let result = await vipApi.addTimeList();
        videoList.value = result;
    } catch (error) {
        console.log("发布时间");
    }
};
//获取数据
onMounted(() => {
    getSortList();
    postVideoList();
    vipSalesList();
    ViewList();
    priceHighList();
    addTimeList();
});
</script>

<style scoped lang="less">
.main {
    width: 100%;
    height: 100%;
    .vip-header {
        width: 1200px;
        height: 150px;
        color: #111;
        background-color: #fff;
        border-radius: 5px;
        padding: 20px 30px 16px;
        margin: 15px auto;
        .title {
            font-size: 16px;
            margin: 0 0 16px;
            font-weight: 400;
        }
        .content {
            position: relative;
            min-height: 50px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            .avatar {
                img {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    margin-right: 10px;
                }
            }
            .mid {
                width: 1000px;
                height: 68px;
                display: flex;
                .left {
                    width: 220px;
                    height: 50px;
                    border-right: 1px solid #dee2e6;

                    .name {
                        width: 220px;
                        height: 24px;
                        padding-top: 10px;
                        font-size: 16px;
                        .box {
                            margin-left: 8px;
                            -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                            background: -webkit-gradient(linear, left top, left bottom, from(#ff289b), to(#ff43d0));
                            background: linear-gradient(#ff289b, #ff43d0);
                            border: 1px solid #ff289b;
                            border-radius: 4px;
                            padding: 0 8px;
                            display: inline-block !important;
                            line-height: 1.15;
                            white-space: nowrap;
                            cursor: pointer;
                            .lv {
                                font-size: 12px;
                                color: #fff;
                            }
                            .lv1 {
                                font-size: 12px;
                                color: #fff;
                            }
                        }
                    }
                    .tip {
                        margin-top: 4px;
                        font-size: 12px;
                        color: #f93684;
                    }
                }
                .middle {
                    width: 390px;
                    height: 68px;
                    display: flex;

                    img {
                        width: 58px;
                        height: 58px;
                        margin-top: 5px;
                        margin-right: 30px;
                        margin-left: 63px;
                    }
                    .text {
                        width: 174px;
                        height: 30px;
                        margin: 13px 0;
                        justify-content: center;
                        i {
                            font-style: normal;
                            color: #f93684;
                        }
                    }
                }
                .right {
                    width: 390px;
                    height: 68px;
                    display: flex;
                    img {
                        width: 58px;
                        height: 58px;
                        margin-top: 5px;
                        margin-right: 30px;
                        margin-left: 78px;
                    }
                    .text {
                        width: 163px;
                        height: 30px;
                        margin: 13px 0;
                        justify-content: center;
                        i {
                            font-style: normal;
                            color: #f93684;
                        }
                    }
                }
            }
            .open {
                width: 80px;
                height: 60px;
                button {
                    border-radius: 50px;
                    margin-bottom: 8px;
                    padding: 9px 15px;
                    font-size: 12px;
                    color: #fff;
                    background-color: #f93684;
                    border-color: #f93684;
                }
                span {
                    color: #7d8090;
                    font-size: 12px;
                }
            }
        }
    }

    .order {
        width: 1200px;
        height: 70px;
        background-color: #ffffff;
        margin: 25px auto;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 30px;
        border-radius: 5px;
        .item {
            display: inline-block;
            font-size: 14px;
            color: #7d8090;
            cursor: pointer;
        }
        :not(:first-child) {
            margin-left: 50px;
        }
        .active {
            color: #f93684;
        }
    }
}
</style>
